<template>
  <PublicPage class="layout_box" page-name="多规格设置" :borderType="true" :showNav="true" :customBack="goBackFn">
    <scroll-view class="layout_con_box" scroll-y="true" -webkit-overflow-scrolling="touch" scroll-with-animation="true">
      <div class="layout_msg_box">
        <div class="title_msg_box">
          <span>选择常用规格类型</span>
          <button class="btn_box" hover-class='hover' @click.stop="manageSpecsFn">管理</button>
        </div>
        <ul class="tag_list_ul">
          <li class="tag_list_li" v-for="(specs, specsIndex) in systemspecList" :key="specsIndex" @click.stop="choiceSpecsFn(specs, specsIndex)">{{specs.specName}}</li>
        </ul>
        <ul class="selected_specs_ul">
          <li class="selected_specs_li" v-for="(slSpecs, slSpecsIndex) in selectedSpec" :key="slSpecsIndex">
            <div class="title_msg_box">
              <span @click.stop="editSpecNameFn(slSpecs, slSpecsIndex)">{{slSpecs.specName}}<img class="edit_icon_box" src="https://image.qqpyyds.com/mpAppImg/icon/edit1_icon.png" alt=""></span>
              <i class="iconfont icon-delete fz-22" @click.stop="deleteSpecFn(slSpecs,slSpecsIndex)"></i>
              <!-- <img class="gray_close_box" @click.stop="deleteSpecFn(slSpecs,slSpecsIndex)" src="https://image.qqpyyds.com/mpAppImg/icon/error1_icon.png" alt=""> -->
            </div>
            <ul class="tag_list_ul">
              <li class="tag_list_li" v-for="(specItem, specItemIndex) in slSpecs.goodsSpecValuesVOList" :key="specItemIndex" @click.stop="editSpecificSpecFn(specItem, slSpecsIndex, specItemIndex)">
                <text class="u-p-r-20">{{specItem.specValue}}</text>
                <img class="close_icon_box" @click.stop="removeSpecificSpecFn(specItem,slSpecsIndex,specItemIndex,slSpecs)" src="https://image.qqpyyds.com/mpAppImg/icon/error1_icon.png" alt="">
              </li>
              <li class="tag_list_li tag_list_li_two" @click.stop="addSpecificSpecFn(slSpecsIndex)" v-if="!(slSpecs.goodsSpecValuesVOList.length>=spuQuantity)" hover-class='hover'>添加具体规格</li>
            </ul>
          </li>
        </ul>
        <div class="add_specs_box"><button class="add_specs_btn" hover-class='hover' @click.stop="addSpecsFn">新增规格类型</button></div>
        <div class="specification_box" v-if="specificList.goodsSpecValuesVOList&&specificList.goodsSpecValuesVOList.length>0">
          <div class="title_msg_box">
            <span>详细规格</span>
            <button class="btn_box" hover-class='hover' @click.stop="batchSetShow=true">批量设置</button>
          </div>
          <div class="specification_details_box">
            <div class="specs_title_box">{{nameStrFn(specificList.specName)}}</div>
            <ul class="specification_list_ul">
              <li class="specification_list_li">价格<span>*</span></li>
              <li class="specification_list_li">成本价</li>
              <li class="specification_list_li">库存</li>
              <li class="specification_list_li">图片</li>
            </ul>
            <ul class="specification_list_ul_msg">
              <li class="specification_list_li_msg" v-for="(details, detailsIndex) in specificList.goodsSpecValuesVOList" :key="detailsIndex">
                <div class="specs_title_box specs_title_box_s">{{nameStrFn(details.specValue)}}</div>
                <div class="specification_list_li_box">
                  <input class="input_box" maxlength="7" type="digit" placeholder="请输入" @input="(e) => clearNoNumInputFn(e, 'salePrice', detailsIndex)" v-model="details.salePrice">
                  <input class="input_box" maxlength="7" type="digit" placeholder="请输入" @input="(e) => clearNoNumInputFn(e, 'costPrice', detailsIndex)" v-model="details.costPrice">
                  <input class="input_box" maxlength="7" type="number" placeholder="不限" @input="(e) => clearIntegerInputFn(e, 'quantity', detailsIndex)"  v-model="details.quantity">
                  <img class="addImg_box" @click.stop="operateImgFn(details,detailsIndex)" v-if="details.images" :src="details.images" alt="">
                  <img class="addImg_box" v-else @click.stop="upImgFn(detailsIndex)" src="https://image.qqpyyds.com/mpAppImg/icon/tianjia1_icon.png" alt="">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="layout_msg_boxbtn_box">
      <button class="submit_box" hover-class='hover' @click.stop="completeFn">完成</button>
    </div>
    <!-- 添加规格弹窗 -->
    <div class="fixed_box" v-if="classifyTypeShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">{{operationType==1?'编辑':'添加'}}规格类型</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="10" v-model.trim="specName" @input="(e) => inputFn(e, 'specName')" placeholder="请输入规格类型名称(限10个字)"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="classifyTypeShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="submitSpecsFn">保存</button>
        </div>
      </div>
    </div>
    <!-- 添加规格弹窗 -->
    <!-- 添加具体规格弹窗 -->
    <div class="fixed_box" v-if="specificSpecShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">{{opSpecificType==1?'编辑':'添加'}}具体规格</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="20" v-model.trim="specificSpecName"  @input="(e) => inputFn(e, 'specificSpecName')" placeholder="请输入具体规格名称(限20个字)"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="specificSpecShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="submitSpecificSpecFn">保存</button>
        </div>
      </div>
    </div>
    <!-- 添加具体规格弹窗 -->
    <!-- 图片操作 -->
    <div class="fixed_box" v-if="imgOperateShow" @click.stop="imgOperateShow = false">
      <div class="publicPopup_box_bt">
        <ul class="btn_list_box">
          <li class="btn_list_li" hover-class='hover' @click.stop="seeImgFn">查看大图</li>
          <li class="btn_list_li" hover-class='hover' @click.stop="replaceImgFn">替换</li>
          <li class="btn_list_li" hover-class='hover' @click.stop="deleteImgFn">删除</li>
          <li class="btn_list_li" hover-class='hover' @click.stop="imgOperateShow = false">取消</li>
        </ul>
      </div>
    </div>
    <!-- 图片操作 -->
    <!-- 批量设置 -->
    <div class="fixed_box" v-if="batchSetShow" @click.stop="batchSetShow=!batchSetShow">
      <div class="publicPopup_box" @click.stop="">
        <div class="public_msg_box">
          <div class="public_titName_box">批量设置</div>
          <ul class="input_list_ul">
            <li class="input_list_li">
              <span>价格<i>(￥)</i><b>*</b></span>
              <input class="input_box" type="digit" maxlength="10" v-model.trim="batchSetData.salePrice"  placeholder="请输入价格">
            </li>
            <li class="input_list_li">
              <span>成本价<i>(￥)</i></span>
              <input class="input_box" type="digit" maxlength="10" v-model.trim="batchSetData.costPrice" placeholder="请输入成本价">
            </li>
            <li class="input_list_li quantity_li">
              <span>库存</span>
              <input class="input_box" type="digit" maxlength="10" :disabled="batchSetData.quantityType" v-model.trim="batchSetData.quantity" placeholder="请输入库存">
              <div class="quantityType_box" @click.stop="batchSetData.quantityType=!batchSetData.quantityType">
                <img class="img_box" :src="batchSetData.quantityType?'https://image.qqpyyds.com/mpAppImg/icon/success2_icon.png':'https://image.qqpyyds.com/mpAppImg/icon/yuanxing1_icon.png'" alt="">
                <em>不限</em>
              </div>
            </li>
          </ul>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="batchSetShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="batchSetSubmitFn">确定</button>
        </div>
      </div>
    </div>
    <!-- 批量设置 -->
  </PublicPage>
</template>
<script>
import goodsApi from "@/api/goods.js"
import { upload } from '../../components/ossutil/ossMult'
import PublicPage from "@/components/publicPage/index.vue"
import Util from "@/api/util.js"
export default {
  components: {PublicPage},
  data() {
    return {
      editSpecData: {},
      operationType: 0,
      classifyTypeShow: false,
      specName: '',
      specificSpecShow: false,
      specificSpecIndex: 0,
      specificSpecName: '',
      specificSpecData: {},
      opSpecificType: 0,
      showSpecificType: true,
      imgOperateShow: false,
      operateImgData: {},
      batchSetShow: false,
      batchSetData: {
        costPrice: '',
        quantity: '',
        salePrice: '',
        quantityType: false
      },
      pageContentData: {},
      routeData: {},
      spuQuantity: 20, // 现在具体规格最多添加多少个
    }
  },
  onLoad (r) {
    this.routeData = r
    this.$store.commit('OPERATE_SPEC_TYPE_STR', '')
    this.querySpecFn()
    this.pageContentData = {
      selectedSpecData: JSON.parse(JSON.stringify(this.$store.state.selectedSpec)),
      specificList: JSON.parse(JSON.stringify(this.$store.state.specificList))
    }
    if (this.showSpecificType&&this.routeData.specNameType==1) this.specificListFn(this.$store.state.selectedSpec[0])
  },
  onShow () {
  },
  computed: {
    selectedSpec () {
      return this.$store.state.selectedSpec
    },
    systemspecList () {
      return this.$store.state.systemspecList
    },
    specificList () {
      return this.$store.state.specificList
    }
  },
  methods: {
    clearNoNumInputFn (e,name,index) {
      let inputValue = Util.clearNoNum(e.target.value)
      this.$nextTick(() => {
        this.specificList.goodsSpecValuesVOList[index][name] = inputValue
      })
    },
    clearIntegerInputFn (e,name,index) {
      let inputValue = Util.clearInteger(e.target.value)
      console.log(inputValue,'inputValueinputValue')
      this.$nextTick(() => {
        this.specificList.goodsSpecValuesVOList[index][name] = inputValue
      })
    },
    inputFn (e, name) {
      let inputValue = e.target.value.replace('^^','')
      this.$nextTick(() => {
        this[name] = inputValue
      })
    },
    nameStrFn (str) {
      let strData = str
      if (!strData) return
      return strData.replace('^^','/')
    },
    goBackFn () {
      let data1 = JSON.stringify(this.pageContentData.selectedSpecData)
      let data2 = JSON.stringify(this.$store.state.selectedSpec)
      let data3 = JSON.stringify(this.pageContentData.specificList)
      let data4 = JSON.stringify(this.$store.state.specificList)
      if ((data1==data2)&&(data3==data4)) {
        this.navigateBack({delta: 1})
        return
      } else {
        let this_ = this
        wx.showModal({
          title: '提示',
          cancelText: '确认退出',
          confirmText: '返回保存',
          confirmColor: '#E34D59',
          content: '您还未保存编辑，退出后本次修改不会保存！',
          success (res) {
            if (res.confirm) {
            } else if (res.cancel) {
              if (this_.routeData.spuId) {
                this_.$store.commit('SELECTED_SPEC', this_.pageContentData.selectedSpecData)
                this_.$store.commit('SPECIFIC_LIST', this_.pageContentData.specificList)
                this_.$store.commit('OPERATE_SPEC_TYPE_STR', '')
                this_.$store.commit('OPERATE_SPEC_DATA', {
                  deleteBigArr: [],
                  deleteSmallArr: []
                })
              }
              this_.navigateBack({delta: 1})
            }
          }
        })
      }
    },
    manageSpecsFn () {
      this.navigateTo({ url: '/pagesA/libraryGoods/specsManage' })
    },
    batchSetSubmitFn () {
      if (!this.batchSetData.salePrice) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入价格！'
        })
      }
      if (Number(this.batchSetData.salePrice)<0.01) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '价格不可小于0.01元!'
        })
      }
      let specificListData = this.$store.state.specificList
      let arr = [...specificListData.goodsSpecValuesVOList]
      arr.forEach((item,i)=>{
          arr[i] = {
          ...item,
          salePrice: this.batchSetData.salePrice,
          costPrice: this.batchSetData.costPrice,
          quantity: this.batchSetData.quantityType? '':this.batchSetData.quantity
        }
      })
      specificListData.goodsSpecValuesVOList = [...arr]
      this.$store.commit('SPECIFIC_LIST', specificListData)
      if (this.routeData.spuId&&this.$store.state.operateSpecTypeStr == '') {
        this.$store.commit('OPERATE_SPEC_TYPE_STR', '已修改')
      }
      this.batchSetShow = false
    },
    operateImgFn (data,index) {
      this.operateImgData = {
        ...data,
        index: index
      }
      this.imgOperateShow = true
    },
    deleteImgFn() {
      let specificListData = this.$store.state.specificList
      specificListData.goodsSpecValuesVOList[this.operateImgData.index] = {
        ...specificListData.goodsSpecValuesVOList[this.operateImgData.index],
        images: ''
      }
      this.$store.commit('SPECIFIC_LIST', specificListData)
      this.imgOperateShow = false
    },
    seeImgFn () {
      this.showSpecificType = false
      wx.previewImage({
        current: this.operateImgData.images,
        urls: [this.operateImgData.images],
        fail: function (res) {}
      })
    },
    replaceImgFn () {
      this.upImgFn(this.operateImgData.index)
    },
    async upImgFn (index) {
      let _this = this
      let specificListData = _this.$store.state.specificList
      _this.showSpecificType =  false
      const res = await upload({ type: 'image', number: 1, checkSize: false }, _this)
      if (res.status == 'success') {
        specificListData.goodsSpecValuesVOList[index] = {
          ...specificListData.goodsSpecValuesVOList[index],
          images: res.data[0].url
        }
        _this.$store.commit('SPECIFIC_LIST', specificListData)
        _this.$forceUpdate()
      } else {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: res.msg || '上传失败，请重试！'
        })
      }
      _this.showSpecificType = true
      _this.imgOperateShow = false
    },
    completeFn () {
      let notArr = []
      let specificListData = this.$store.state.specificList
      if (specificListData.goodsSpecValuesVOList&&specificListData.goodsSpecValuesVOList.length>0) {
        specificListData.goodsSpecValuesVOList.forEach((item,i)=>{
          if (!item.salePrice || Number(item.salePrice)<0.01) {
            notArr.push(item)
          }
        })
      }
      if (notArr.length>0) {
        if (notArr[0].salePrice === '' || notArr[0].salePrice === 'undefined' || notArr[0].salePrice === undefined) {
          return wx.showToast({
            icon: 'none',
            mask: true,
            title: `【${this.nameStrFn(notArr[0].specValue)}】价格输入不正确！`,
          })
        }
        if (Number(notArr[0].salePrice)<0.01) {
          return wx.showToast({
            icon: 'none',
            mask: true,
            title: `【${this.nameStrFn(notArr[0].specValue)}】价格不可小于0.01元!`
          })
        }
      }
      // if (this.$store.state.selectedSpec.length<1) {
      //   return wx.showToast({
      //     icon: 'none',
      //     mask: true,
      //     title: '请添加规格！'
      //   })
      // }
      if (this.$store.state.selectedSpec.length>0) { // 设置的spu大于一个判断下sku是否存在
        let spuArr = []
        this.$store.state.selectedSpec.forEach((item,i)=>{
          console.log(item)
          if (!item.goodsSpecValuesVOList||item.goodsSpecValuesVOList.length<1) {
            spuArr.push(item)
          }
        })
        if(spuArr.length>0&&spuArr[0].specName) {
          return wx.showToast({
            icon: 'none',
            mask: true,
            title: `${spuArr[0].specName}未添加具体规格！`
          })
        }
      }
      if (!(JSON.stringify(this.$store.state.modifySpecificList) == JSON.stringify(specificListData))) {
        if (this.routeData.spuId&&this.$store.state.operateSpecTypeStr == '') {
          this.$store.commit('OPERATE_SPEC_TYPE_STR', '已修改')
        }
      }
      this.$store.commit('SPECIFIC_LIST', specificListData)
      this.navigateBack({
        delta: 1
      })
    },
    specificListFn (list1,list2) {
      let specificArr = JSON.parse(JSON.stringify(this.$store.state.specificList)) // 存下之前已经添加规格的数据好对比添加
      if (!list1) {
        this.$store.commit('SELECTED_SPEC', [])
        this.$store.commit('SPECIFIC_LIST', {goodsSpecValuesVOList: []})
        return
      }
      let specificListData = JSON.parse(JSON.stringify(this.$store.state.specificList))
      specificListData.goodsSpecValuesVOList=[]
      if (list2&&list2.specName&&(list2.goodsSpecValuesVOList&&list2.goodsSpecValuesVOList.length>0)&&(list1.goodsSpecValuesVOList&&list1.goodsSpecValuesVOList.length>0)) {
        specificListData = {
          ...specificListData,
          specName: `${list1.specName}^^${list2.specName}`,
        }
        list1.goodsSpecValuesVOList.forEach((item, i)=>{
          list2.goodsSpecValuesVOList.forEach((data, j)=>{
            specificListData.goodsSpecValuesVOList.push({
              specValue: `${item.specValue}^^${data.specValue}`,
              salePrice: '',
              costPrice: '',
              quantity: '',
              images: ''
            })
          })
        })
      } else {
        specificListData = {
          ...specificListData,
          specName: list1&&list1.specName,
        }
        list1.goodsSpecValuesVOList.forEach((item,i)=>{
          specificListData.goodsSpecValuesVOList[i] = {
            specValue: item.specValue,
            salePrice: '',
            costPrice: '',
            quantity: '',
            images: ''
          }
        })
      }
      if (specificArr&&specificArr.goodsSpecValuesVOList&&specificArr.goodsSpecValuesVOList.length>0) { // 处理已经有规格在添加规格还原之前的数据
        let spArr = specificListData
        spArr.goodsSpecValuesVOList.forEach((item,i)=>{
          specificArr.goodsSpecValuesVOList.forEach((data,j)=>{
            if (item.specValue == data.specValue) {
              specificListData.goodsSpecValuesVOList[i] = {
                ...specificListData.goodsSpecValuesVOList[i],
                salePrice: data.salePrice || '',
                costPrice: data.costPrice || '',
                quantity: data.quantity || '',
                images: data.images || '',
              }
            }
          })
        })
      }
      if (this.routeData.spuId) this.$store.commit('OPERATE_SPEC_TYPE_STR', '已新增')
      this.$store.commit('SPECIFIC_LIST', specificListData)
    },
    submitSpecsFn () {
      if (!this.specName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入规格类型名称!'
        })
      }
      let arr = this.$store.state.selectedSpec
      let mun = 0
      arr.forEach((item,i)=>{
        if (item.specName == this.specName) {
          mun = mun+1
        }
      })
      if (mun>0) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '已存在该规格类型名称!'
        })
      }
      if (this.operationType == 0) {
        arr.push({
          specName: this.specName
        })
        this.$store.commit('OPERATE_SPEC_TYPE_STR', '已新增')
      }
      if (this.operationType == 1) {
        arr[this.editSpecData.index] = {
          ...arr[this.editSpecData.index],
          specName: this.specName
        }
        if (this.routeData.spuId) {
          let specificListData = this.$store.state.specificList
          let specNameArr = specificListData.specName.split('^^')
          specNameArr.forEach((item,i)=>{
            if (item == this.editSpecData.specName) {
              specNameArr[i] = this.specName
            }
          })
          specificListData = {
            ...specificListData,
            specName: specNameArr.join('^^')
          }
          let specArr = [...specificListData.goodsSpecValuesVOList]
          specArr.forEach((sp,k)=>{
            // if (sp.specName== this.editSpecData.specName) {
            //   specificListData.goodsSpecValuesVOList[k].specName = this.specName
            // }
            specificListData.goodsSpecValuesVOList[k].specName = specificListData.specName
          })
          console.log(specificListData)
          this.$store.commit('SPECIFIC_LIST', specificListData)
        }
      }
      if (!this.$store.state.operateSpecTypeStr) {
        this.$store.commit('OPERATE_SPEC_TYPE_STR', '已修改')
      }
      this.$store.commit('SELECTED_SPEC', arr)
      this.classifyTypeShow = false
    },
    addSpecsFn () {
      if (this.selectedSpec.length>=2) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '最多只能添加两个规格类型!'
        })
      }
      this.operationType = 0
      this.specName = ''
      this.classifyTypeShow = true
    },
    deleteSpecFn (data,index) {
      let this_ = this
      let arr = this_.$store.state.selectedSpec
      wx.showModal({
        title: '提示',
        content: `确定要删除规格类型“${data.specName}”吗？子规格也会同步全部删除`,
        success (res) {
          if (res.confirm) {
            arr.splice(index,1)
            if (arr.length>1) {
              this_.specificListFn(arr[0],arr[1])
            } else {
              this_.specificListFn(arr[0])
            }
            this_.$store.commit('SELECTED_SPEC', arr)
            this_.removeBigItemFn()
          } else {

          }
        }
      })
    },
    editSpecNameFn (data, index) {
      this.operationType = 1
      this.editSpecData = {}
      this.editSpecData = {
        ...data,
        index: index
      }
      this.specName = ''
      this.specName = this.editSpecData.specName
      this.classifyTypeShow = true
    },
    addSpecificSpecFn (index) {
      this.specificSpecIndex = index
      this.specificSpecName = ''
      this.opSpecificType = 0
      this.specificSpecShow = true
    },
    editSpecificSpecFn (data,index1,index2) {
      this.specificSpecData = {
        ...data,
        index1: index1,
        index2: index2
      }
      this.specificSpecName = this.specificSpecData.specValue
      this.opSpecificType = 1
      this.specificSpecShow = true
    },
    submitSpecificSpecFn () {
      let this_ = this
      if (!this_.specificSpecName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入具体规格名称!'
        })
      }
      let arr = this_.$store.state.selectedSpec
      let mun = 0
      if (arr[this_.specificSpecIndex].goodsSpecValuesVOList&&arr[this_.specificSpecIndex].goodsSpecValuesVOList.length>0) {
        if (arr[this_.specificSpecIndex].goodsSpecValuesVOList.length>=this_.spuQuantity) {
          return wx.showToast({
            icon: 'none',
            mask: true,
            title: `具体规格最多可添加${this_.spuQuantity}个!`
          })
        }
        arr[this_.specificSpecIndex].goodsSpecValuesVOList.forEach((item,i) => {
          if (item.specValue == this_.specificSpecName) {
            mun = mun+1
          }
        })
      }
      if (mun>0) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: `已存在【${this_.specificSpecName}】规格!`
        })
      }
      if (this_.opSpecificType == 0) {
        if (!arr[this_.specificSpecIndex].goodsSpecValuesVOList||arr[this_.specificSpecIndex].goodsSpecValuesVOList.length<1) {
          arr[this_.specificSpecIndex].goodsSpecValuesVOList = []
        }
        arr[this_.specificSpecIndex].goodsSpecValuesVOList.push({specValue: this_.specificSpecName})
        this.$store.commit('OPERATE_SPEC_TYPE_STR', '已新增')
      }
      if (this_.opSpecificType == 1) {
        arr[this_.specificSpecData.index1].goodsSpecValuesVOList[this_.specificSpecData.index2] = {
          ...arr[this_.specificSpecData.index1].goodsSpecValuesVOList[this_.specificSpecData.index2],
          specValue: this_.specificSpecName
        }
        this_.$store.commit('OPERATE_SPEC_TYPE_STR', '已修改')
      }
      // &&this_.$store.state.modifySelectedSpec.length==1
      // if (this_.routeData.spuId&&this.$store.state.operateSpecTypeStr=='') {
      //   this.$store.commit('OPERATE_SPEC_TYPE_STR', '已修改')
      // } else {
      //   this.$store.commit('OPERATE_SPEC_TYPE_STR', '已新增')
      // }
      if (this_.routeData.spuId) {
        // &&this_.$store.state.modifySelectedSpec.length==1
        if (this_.$store.state.operateSpecTypeStr=='已修改') {
          let specificListData = this_.$store.state.specificList
          if (this_.opSpecificType == 1) {
            specificListData.goodsSpecValuesVOList.forEach((item,i)=>{
              let nameArr = item.specValue.split('^^')
              nameArr.forEach((name,j)=>{
                if (name == this_.specificSpecData.specValue) {
                  nameArr[j] = this_.specificSpecName
                  specificListData.goodsSpecValuesVOList[i] = {
                    ...specificListData.goodsSpecValuesVOList[i],
                    specValue: nameArr.join('^^')
                  }
                }
              })
            })
          }
          if (this_.opSpecificType == 0) {
            console.log(specificListData,this_.opSpecificType,'000000000000')
            specificListData.goodsSpecValuesVOList.push({
              specValue: this_.specificSpecName,
              salePrice: '',
              costPrice: '',
              quantity: '',
              images: ''
              })
          }
          this.$store.commit('SPECIFIC_LIST', specificListData)
        } else {
          this_.removeBigItemFn()
        }
      }
      // if (this_.$store.state.modifySelectedSpec.length==1) {

      // } else {
      //   if (arr.length>1) {
      //     this.specificListFn(arr[0],arr[1])
      //   } else {
      //     this.specificListFn(arr[0])
      //   }
      // }
      if (this_.$store.state.operateSpecTypeStr=='已新增') {
        if (arr.length>1) {
          this.specificListFn(arr[0],arr[1])
        } else {
          this.specificListFn(arr[0])
        }
      }
      this.$store.commit('SELECTED_SPEC', arr)
      this_.specificSpecShow = false
    },
    removeBigItemFn(){ // 这里处理新增删除规格数据
      let this_ = this
      let skuIdArr = []
      if (this_.pageContentData.specificList&&this_.pageContentData.specificList.goodsSpecValuesVOList&&this_.pageContentData.specificList.goodsSpecValuesVOList.length>0){
        this_.pageContentData.specificList.goodsSpecValuesVOList.forEach((sp,l)=>{
          skuIdArr.push(sp.id)
        })
      }
      let operateFrom = this_.$store.state.operateSpecData
      this_.pageContentData.selectedSpecData.forEach((se,o)=>{
        let data = {
          ...se,
          skuIdArr: skuIdArr
        }
        operateFrom.deleteBigArr.push(data)
      })
      operateFrom = { // 把删除小项初始化
        ...operateFrom,
        deleteSmallArr: []
      }
      this_.$store.commit('OPERATE_SPEC_DATA', operateFrom)
      this_.$store.commit('OPERATE_SPEC_TYPE_STR', '已新增')
    },
    removeSpecificSpecFn(specItem,index1,index2,slSpecs) {
      let this_ = this
      wx.showModal({
        title: '提示',
        content: `确定要删除子规格“${specItem.specValue}”吗？`,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            if (this_.routeData.spuId){
              let specificListData = JSON.parse(JSON.stringify(this_.$store.state.specificList))
              if ((this_.$store.state.operateSpecTypeStr=='' || this_.$store.state.operateSpecTypeStr=='已修改')&&this_.$store.state.modifySelectedSpec.length==1) {
                let modifyFrontData = JSON.parse(JSON.stringify(this_.$store.state.modifySelectedSpec))
                let operateFrom = JSON.parse(JSON.stringify(this_.$store.state.operateSpecData))
                let removeIndex = ''
                let skuId = ''
                specificListData.goodsSpecValuesVOList.forEach((sp,index)=>{
                  if (sp.specValue==specItem.specValue) {
                    removeIndex = index
                    skuId = sp.id
                  }
                })
                modifyFrontData[index1].goodsSpecValuesVOList.forEach((modifyItem,h)=>{
                  console.log(modifyItem)
                  console.log(specItem)
                  if (modifyItem.id==specItem.id) {
                    let data = {
                      ...specItem,
                      maxId:slSpecs.id,
                      skuId: skuId
                    }
                    operateFrom.deleteSmallArr.push(data)
                  }
                })
                specificListData.goodsSpecValuesVOList.splice(removeIndex,1)
                console.log(specificListData,'123456788')
                this_.$store.commit('SPECIFIC_LIST', specificListData)
                console.log(operateFrom,'0000000000000000000')
                this_.$store.commit('OPERATE_SPEC_DATA', operateFrom)
                this_.$store.commit('OPERATE_SPEC_TYPE_STR', '已修改')
              } else {
                this_.removeBigItemFn()
              }
            }
            let arr = JSON.parse(JSON.stringify(this_.$store.state.selectedSpec))
            arr[index1].goodsSpecValuesVOList.splice(index2, 1)
            console.log(arr,'arrarrarrarrarr')
            this_.$store.commit('SELECTED_SPEC', arr)
            if (arr.length>1) {
              this_.specificListFn(arr[0],arr[1])
            } else {
              this_.specificListFn(arr[0])
            }
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    choiceSpecsFn (data, index) {
      let arr = JSON.parse(JSON.stringify(this.$store.state.selectedSpec))
      let mun = 0
      arr.forEach((item,i) => {
        if (item.specName == data.specName) {
          mun = mun+1
        }
      })
      if (mun>0) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: `已存在【${data.specName}】规格类型!`
        })
      }
      if (arr.length>=2) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '最多只能添加两个规格类型!'
        })
      }
      arr.push(data)
      if (arr.length>1) {
        this.specificListFn(arr[0],arr[1])
      } else {
        this.specificListFn(arr[0])
      }
      this.$store.commit('OPERATE_SPEC_TYPE_STR', '已新增')
      this.$store.commit('SELECTED_SPEC', JSON.parse(JSON.stringify(arr)))
      this.removeBigItemFn()
    },
    querySpecFn () {
      goodsApi.querySpec().then(async (res_) => {
        if (res_.code == 200) {
          let categoryArr = res_.data
          this.$store.commit('SYSTEM_SPEC_LIST', categoryArr)
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.layout_box {
  width: 100vw;
  height: 100%;
  background-color: #F2F3F5;
  .layout_con_box {
    width: 100%;
    height: calc(100% - 100rpx);
  }
  .title_msg_box {
    background-color: #fff;
    font-size: 32rpx;
    padding: 24rpx 32rpx;
    color: rgba(0,0,0,0.90);
    font-weight: 400;
    line-height: 48rpx;
    border-bottom: 2rpx solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn_box {
      height: 48rpx;
      padding: 0 16rpx;
      border: 2rpx solid #e44435;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #E44435;
      font-size: 24rpx;
      font-weight: 400;
      box-sizing: border-box;
    }
  }
  .tag_list_ul {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    padding: 32rpx 32rpx 0rpx 32rpx;
    .tag_list_li {
      padding: 10rpx 22rpx;
      border-radius: 4rpx;
      font-size: 28rpx;
      background-color: #f2f3f5;
      color: rgba(0,0,0,0.60);
      font-weight: 400;
      position: relative;
      margin-right: 16rpx;
      margin-bottom: 32rpx;
    }
  }
  .selected_specs_ul {
    .selected_specs_li {
      margin-top: 22rpx;
      .title_msg_box {
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          .edit_icon_box {
            width: 35rpx;
            height: 35rpx;
            margin-left: 16rpx;
          }
        }
        .gray_close_box {
          width: 48rpx;
          height: 48rpx;
        }
      }
      .tag_list_ul {
        .tag_list_li {
          background-color: #ffe5de;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #E44435;
          font-weight: 500;
          position: relative;
          .close_icon_box {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            right: 4rpx;
            top: 4rpx;
          }
          &.tag_list_li_two {
            font-weight: 400;
            color: rgba(0,0,0,0.90);
            border: 2rpx solid #dcdee0;
            background-color: #fff;
          }
        }
      }
    }
  }
  .add_specs_box {
    padding: 40rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .add_specs_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 96rpx;
      border: 2rpx solid #e44435;
      border-radius: 8rpx;
      color: #E44435;
      font-weight: 400;
      font-size: 32rpx;
    }
  }
  .specification_box {
    background-color: #fff;
    .specification_details_box {
      padding: 0 32rpx;
      .specs_title_box {
        padding: 20rpx 0;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.90);
        line-height: 40rpx;
        &.specs_title_box_s {
          padding: 16rpx 0;
          color: rgba(0,0,0,0.60);
        }
      }
      .specification_list_ul {
        width: 100%;
        height: 68rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f2f3f5;
        font-size: 28rpx;
        font-weight: 400;
        border-radius: 4rpx;
        color: rgba(0,0,0,0.60);
        padding: 0 20rpx;
        .specification_list_li {
          span {
            color: #E44435;
          }
        }
      }
      .specification_list_ul_msg {
        overflow: hidden;
        .specification_list_li_msg {
          overflow: hidden;
          margin-bottom: 32rpx;
          .specification_list_li_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .input_box {
              width: 180rpx;
              height: 64rpx;
              border: 2rpx solid #dcdee0;
              border-radius: 6rpx;
              padding: 0rpx 16rpx;
              margin-right: 26rpx;
              &:last-child {
                margin-right: 0rpx;
              }
            }
            .addImg_box {
              width: 64rpx;
              height: 64rpx;
            }
          }
        }
      }
    }
  }
  .layout_msg_boxbtn_box {
    width: 100%;
    background-color: #fff;
    .submit_box {
      width: 100%;
      height: 100rpx;
      background: #e44435;
      border-radius: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #fff;
    }
  }
}
.fixed_box {
  .publicPopup_box_bt {
    border-radius: 8rpx 8rpx 0 0;
    .btn_list_box {
      width: 100%;
      padding-bottom: 0rpx;
      padding-bottom: constant(safe-area-inset-bottom);
	    padding-bottom: env(safe-area-inset-bottom);
      .btn_list_li {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: rgba(0,0,0,0.90);
        border-top: 2rpx solid #eee;
        padding: 24rpx 0;
        &:nth-child(1) {
          border-top: none;
        }
        &:last-child {
          border-top: 10rpx solid #eee;
        }
      }
    }
  }
  .publicPopup_box {
    .input_list_ul {
      .input_list_li {
        display: flex;
        align-items: center;
        padding: 24rpx 32rpx;
        border-bottom: 2rpx solid #eee;
        span {
          display: inline-block;
          width: 168rpx;
          font-size: 32rpx;
          font-weight: bolder;
          line-height: 44rpx;
          display: flex;
          align-items: center;
          i {
            font-size: 24rpx;
          }
          b {
            color: #E44435;
            font-weight: 400;
          }
        }
        .input_box {
          width: 284rpx;
        }
        &.quantity_li {
          .input_box {
            width: 200rpx;
          }
          .quantityType_box {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: 400;
            .img_box {
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
      }
    }
  }
}
</style>